<template>
  <div style="width:100vw;" class="class-center-box">
    <!-- 头部 -->
    <!-- <mt-header fixed title="课程中心">
      <router-link to="/StudyCenter" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>-->
    <div>
      <div class="bscroll" ref="faceClass">
        <div :style="loadedDown ? 'padding-bottom:0;' : ''" class="bscroll-container">
          <div class="default-page-box" v-show="!faceClass.length">
            <div class="default-page">
              <div class="default-text">哎呀，空空如也!</div>
            </div>
          </div>
          <div style="flex-wrap:wrap;" class="class-center-excellent-courses flex-row">
            <div
              @click="goFaceClass(item.id)"
              v-for="(item,index) in faceClass"
              :key="index"
              class="courses-card"
              :class="[(index+1)%2 == 0 ? marginRight : '']"
            >
              <div
                :style="`background-image:url(${item.coursePhoto || require('@/assets/homePicture/detail1.jpg')});`"
                class="img-box"
              >
                <!-- <img :src="item.coursePhoto || " alt /> -->
              </div>
              <div class="courses-tip text-over">{{item.title}}</div>
              <div class="user-msg flex-row">
                <p style="color:#4787e4;margin-right:5px;" class="iconfont iconxingming"></p>
                <p class="text-over">{{item.username}} · {{item.deptName || '外部导师'}}</p>
              </div>
            </div>
          </div>
          <div v-show="loadingDown" style="padding:10px;text-align:center;">
            <mt-spinner type="snake"></mt-spinner>
          </div>
          <div v-show="loadedDown" style="line-height:50px;text-align:center;">没有更多数据</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { setText } from "../../untils/ddnavigate";
import BScroll from "better-scroll";
export default {
  data() {
    return {
      marginRight: "margin-right",
      faceClass: [],
      params: {
        page: 1,
        pageSize: 10
      },
      pageTotal: "",
      loadingDown: false,
      loadingUp: false,
      loadedDown: false
    };
  },
  mounted() {
    let { params } = this;
    this.$post("getGoodCourses", params).then(res => {
      if (res.success) {
        this.faceClass = res.data.goodCourseList;
        this.pageTotal = res.data.totals;
        // better-scroll初始化
        this.initScroll("faceClass");
      }
    });
    // 设置标题文字
    setText("精品课程");
  },
  methods: {
    initScroll(dom) {
      let that = this;
      that.$nextTick(() => {
        let bscrollDom = this.$refs[dom];
        let bScroll = new BScroll(bscrollDom, {
          click: true,
          probeType: 2,
          bounceTime: 700, //回弹时间
          pullUpLoad: {
            threshold: 0, // 当上拉距离超过50px时触发 pullingUp 事件
            stop: 50
          },
          useTransition: false // 防止iphone微信滑动卡顿
        });
        // bScroll.on("pullingDown", () => {
        //   that.loadingUp = true;
        //   that.loadedDown = false;
        //   that.params.page = 1;
        //   setTimeout(() => {
        //     that.classFunction(that.params, dom, "downLoad");
        //   }, 1000);
        //   bScroll.finishPullDown();
        // });
        bScroll.on("pullingUp", () => {
          let { pageTotal } = that;
          console.log(pageTotal);
          if (that[dom].length < pageTotal) {
            that.loadingDown = true;
            that.params.page++;
            setTimeout(() => {
              that.classFunction(that.params, dom, "upLoad");
            }, 1000);
          } else {
            that.loadedDown = true;
          }
          bScroll.finishPullUp();
        });
        bScroll.refresh();
      });
    },
    classFunction(params) {
      let that = this;
      this.$post("getGoodCourses", params).then(res => {
        if (res.success) {
          that.faceClass = that.faceClass.concat(res.data.goodCourseList);
          that.loadingDown = false;
          that.loadingUp = false;
        } else {
          that.loadingDown = false;
          that.loadingUp = false;
        }
      });
    },
    actionSheet() {
      this.sheetVisible = !this.sheetVisible;
    },
    goFaceClass(id) {
      this.$router.push({
        path: "/faceClass",
        query: { id, type: "homeface" }
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import url("~@/pagecss/class-center.less");
.bscroll-container {
  padding-bottom: 70px;
}
</style>